<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'login.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	   function checkName()
	   {
	      var obj=document.getElementById("in1");
	      if(obj.value=="请输入用户名")
	      { 
	         obj.value="";
	         obj.style.color="black";
	      }
	   }
	   
	   function blurName()
	   {
	      var obj=document.getElementById("in1");
	      var obj2=document.getElementById("p1");
	      if(obj.value==""||obj.value.length<2||obj.value.length>12)
	      {  
	        obj2.innerHTML="<font color='red' font-size='2px'>用户名不能小于两位或者大于十二位</font>";
	      }else
	      {
	        obj2.innerHTML="<font color='green' font-size='8px'>用户名合法</font>";
	      }
	   }
	   
	   function blurPwd()
	   {
	      var obj=document.getElementById("in2");
	      var obj2=document.getElementById("p2");
	      if(obj.value==""||obj.value.length<2||obj.value.length>18)
	      {  
	        obj2.innerHTML="<font color='red' font-size='2px'>密码不能小于两位或者大于十八位</font>";
	      }else
	      {
	        obj2.innerHTML="<font color='green' font-size='8px'>密码合法</font>";
	      }
	   }
	   
	   function checkYzm()
	   {
	      var obj=document.getElementById("in3");
	      if(obj.value=="请输入验证码")
	      { 
	         obj.value="";
	         obj.style.color="black";
	      }
	   }

	//math.round()四舍五入
    //math.random()取0-1之间的随机数
    var temp="";//把temp提取为全局变量
    function lodyyzm(){
	temp="";
	var i=Math.round(Math.random()*14)+1;
	//document.getElementById("sp1").style.background="url('images/"+i+".jpg')";
	for(var i=0;i<4;i++){
		var x= Math.round(Math.random()*9);
		temp+=x;
		}
		document.getElementById("sp1").innerHTML="<font size=5 color='green'>"+temp+"</font>";
	}
    function check1(){
	var y=document.getElementById("in3").value;
	if(y==temp){
		document.getElementById("sp2").innerHTML="<img src='pic/action_check.png' size=5>";
		}else{       
			document.getElementById("sp2").innerHTML="<img src='pic/action_delete.png' size=5>";
			}
	}
	
   </script>

  </head>
  
  <style type="text/css">
  .div
  {
  width: 470px;
  height: 420px;
  margin:auto;
  margin-top:230px;
  background-color: rgba(94,94,94,0.8);
		border-radius:15px;
  }
  </style>
  
  
  
  <body onload="lodyyzm()" background="pic/10112.jpg" >
  <font color="red">${param.msg }</font>
  <div align="center" class="div">
    <form name="f1" action="login" method="post">
    <h1>登陆界面</h1>
    <table cellpadding="10">
    <tr>
    <td  style="font-size: 20px">用户名：
    </td>
    <td><input type="text" name="uname" id="in1" value="请输入用户名" onfocus="checkName()" onblur="blurName()" style="color: #E5E42D"/>
    <br><span id="p1"></span>
    </td>
    </tr>
     <tr>
    <td  style="font-size: 20px">密码：
    </td>
    <td><input type="password" name="pwd" id="in2"  onblur="blurPwd()"/>
    <br><span id="p2"></span>
    </td>
    </tr>
     <tr>
    <td style="font-size: 20px">验证码：
    </td>
    <td><input type="text" size="10" name="yzm" size="8" id="in3" onblur="check1()" value="请输入验证码" onfocus="checkYzm()" style="color: #E5E42D"/>
        <span id="sp1" onclick="lodyyzm()"></span>
        <span id="sp2"></span>
        </td>
    </tr>
    </table><br>
  <input type="submit" name="b1" value="登录" style="font-size:22"/>
  <input type="reset" name="b2" value="重置" style="font-size:22"/>
  <a href="jsp/reg.jsp"><input type="button" name="b3" value="注册" style="font-size:22"/></a>
    </form>
  </div>
  </body>
</html>
